<template>
  <div>
  	<mt-swipe :auto="5000" class='adlist' v-if='imgList.length > 0' v-cloak>
		  <mt-swipe-item v-for='(item,index) in imgList' :key='index' class='aditem'>
		  	<img v-lazy.container="item.url" class="bgimg">
		  </mt-swipe-item>
		</mt-swipe>
    <div class="title_name">{{Name}}</div>
    <div class="pdcom">
      <div class="tagName" v-for='(item,index) in Tags'>{{item.Name}}</div>
    </div>
    <div class="pdcom">
      <div class="fl">
        <span style="font-size:18px;font-weight:400;">拼货价: </span>
        <span class="red" style="font-size:13px;font-weight:600"> ￥</span>
        <span class="red" style="font-size:19px;font-weight:600;">{{Price}}</span>
      </div>
      <div class="fr" v-if='Activity.TotalSaleCount > 0' v-cloak>
        <span style="font-size:12px;font-weight:400;color:#ccc;">总销量:{{Activity.TotalSaleCount}}件</span>
      </div>
    </div>
    <div class="pdcom">
      <div class="progress">
        <div class="prence" :style='"width:"+prence+"%;"'></div>
      </div>
    </div>
    <div class="phnum">
      {{(Activity.TransCount-Activity.ChengTuanCount)>=0?'已拼'+ Activity.TransCount +'件，我也要拼':'已拼'+ Activity.TransCount +'件,差'+(Activity.ChengTuanCount - Activity.TransCount)+'件成团'}}
    </div>
    <div class="msg">{{(Activity.TransCount-Activity.ChengTuanCount)>=0?'已成团，即将向档口报单，想拼的赶紧下单哈！':'快成团了，约熟悉的店主一起拼～'}}</div>
    <div v-html='DescriptionHead'></div>
    <div>
      <img v-for='(item,index) in Description' :key='index' class='description bgimg' v-lazy.container="item.url">
    </div>
    <div v-html='DescriptionFoot'></div>
    <div class="foot_box">
      <div class="foot_fixed">
        <div class="collect" @click='GoIndex'>
          <img src="../../assets/footer/tab_quick_normal.png">
          <span>首页</span>
        </div>
        <div class="collect" @click='collect'>
         <!--  <img :src="IsFavorite?'../../assets/icon/collect.png':'../../assets/icon/not_collect.png'" > -->
          <img src="../../assets/icon/collect.png" v-if='IsFavorite'>
          <img src="../../assets/icon/not_collect.png" v-if='!IsFavorite'>
          <span>收藏</span>
        </div>
        <div class="collect" @click='GoCar'>
          <img src="../../assets/footer/gouwuche.png">
          <span>购物车</span>
        </div>
        <button @click='addCar' class="bigbtn" v-for='(item,idx) in ButtomBigButtons' v-if='ItemStatu && item.isPoint'>{{item.title}}</button>
        <button  class="bigbtn bggray"  v-if='!ItemStatu'>{{tips}}</button>
      </div>
    </div>
    
    <detailChange :fromType='1' :price='Price' :name='Name' :info='info' :show='show' v-on:listShow='changeShow'></detailChange>  
    
  </div>
</template>

<script>
const imgutil = require('../../common/until.js')

import Vue from 'vue'
import { Lazyload ,Swipe, SwipeItem, MessageBox, Indicator } from 'mint-ui'
import detailChange from '../compontents/detailChange'

Vue.use(Lazyload)
Vue.component(Swipe.name, Swipe);
Vue.component(SwipeItem.name, SwipeItem)
export default {
  name: 'itemdetail',
  data(){
  	return {
      imgList:[],
      Name: '',
      Price: '',
      Tags: [],
      Activity: {},
      DescriptionHead:'',
      Description: [],
      DescriptionFoot:'',
      prence: Number,
      ButtomBigButtons: [{title: "我要拼单", action: "拼单", isPoint: true, isEnable: true, type: "button"}],
      IsFavorite: true,
      show:false,
      info:{Products:[]},
      ItemStatu: true,
      tips: ''
  	}
  },
  props: {},
  methods: {
    GoIndex: function(){
      this.$router.push({
        path: '/index/all'
      })
    },
    collect: function(){
      const that = this

      if(that.IsFavorite){
        that.IsFavorite = !that.IsFavorite
        that.$http('/shop/agent/RemoveItemFromMyFavorite',{id:that.$route.query.id},function(res){

        },'POST')
      }else{
        that.IsFavorite = !that.IsFavorite
        that.$http('/shop/agent/AddItemToMyFavorite',{id:that.$route.query.id},function(res){

        },'POST')
      }

    },
    GoCar: function(){
      this.$router.push({
        path: '/index/car'
      })
    },
    addCar: function(Data){
      const that = this
      Indicator.open()
      that.$http('/pinhuoitem/getinfo',{id:that.$route.query.id,typeid:1},function(res){
        Indicator.close()
        if(res.Result){
          res.Data.MainColorPic = imgutil.getUrl(res.Data.MainColorPic,200)
          res.Data.Products.map(item => {
            item.ColorPic = imgutil.getUrl(item.ColorPic, 200);
            item.SizeList.map( item1 => {
              item1.qty = 0;
            })
          })
          that.info = res.Data
        }
      },'GET')
      this.show = true
      document.querySelector('body').style.overflow = 'hidden'
    },
    changeShow:function(data){
      this.show = false
    }
  },
  created: function(){
    const that = this
    Indicator.open()
    that.$http('/pinhuoitem/detail2',{id:that.$route.query.id},function(res){
      Indicator.close()
      if(res.Result){
        that.imgList = res.Data.Images.slice(0, 5).map(item => {
          return {
            url: imgutil.getUrl(item, 1000)
          }
        })
        that.Description = res.Data.Images.map(item => {
          return {
            url: imgutil.getUrl(item, 1000)
          }
        })
        let qty = 0
        res.Data.Products.map(item => {
            item.SizeList.map(m => {
                m.qty = 0;
                qty += m.Stock;
            })
        })
        if(res.Data.ItemStatu == '已下架'){
          that.ItemStatu = false
          that.tips = '已下架'
        }else if(qty == 0){
          that.ItemStatu = false
          that.tips = '已经抢完'
        }else {
          that.ItemStatu = true
        }


        that.Tags = res.Data.Tags
        that.Name = res.Data.Name
        that.Price = res.Data.Price
        that.Activity = res.Data.Activity
        that.DescriptionHead = res.Data.DescriptionHead
        that.DescriptionFoot = res.Data.DescriptionFoot
        that.prence = res.Data.Activity.TransCount/res.Data.Activity.ChengTuanCount*100
        that.ButtomBigButtons = res.Data.ButtomBigButtons  
        that.IsFavorite = res.Data.IsFavorite
      }
    },'GET')
  },
  mounted:function() {

  },
  components:{
  	detailChange
  }
}
</script>
<style scoped>
	.adlist,.aditem{width: 100%;height: 468px;}
	.aditem img{width: 100%;object-fit: cover;display: inline-block;object-position: 50%;height: 100%;}
  .title_name{padding: 10px 5% 0;font-size: 16px;font-weight: 400;color: #000;}
  .tagName{font-size: 14px;color: #ca5254;background-color: #fcedee;border-radius: 14px;float: left;padding: 4px 12px;margin: 5px 0 0 10px;}
  .pdcom{overflow:hidden;padding: 10px 3% 0;}
  .red{color: red;}
  .fl{float: left;}
  .fr{float: right;}
  .progress{width: 100%;height: 8px;background-color: #ddd;border-radius: 8px;overflow: hidden;margin-bottom: 10px;}
  .prence{height: 8px;background-color: #f97b7c;}
  .phnum{font-size: 12px;color: #555;text-align: center;}
  .msg{margin-top: 10px;margin-bottom: 10px;text-align: center;color: #ccc;font-size: 12px;}
  .description{width: 100%;margin-bottom: 5px;}
  [v-cloak]{display: none;}
  .foot_box{height: 52px;width: 100%;position: relative;}
  .foot_fixed{position: fixed;width: 100%;bottom: 0;display: flex;flex-direction: row;justify-content: space-around;background-color: #fff;border-top: 1px solid #ddd;}
  .collect{height: 40px;padding: 5px 3%;width: 10%;text-align: center;font-size: 12px;color: #555;}
  .collect img{display: block;width: 24px;height: 24px;margin: 0 auto;}
  .bigbtn{width: 100px;height: 40px;line-height: 40px;font-size: 14px;background-color: #c60a1e;color: #fff;border-radius: 5px;border: none;outline: none;margin-top: 5px;}
  .bggray{background: #666;}
  
</style>